@if ((libraryState$ | async)?.libraries; as libraries) {
  <div
    class="flex flex-col gap-8 p-4 items-center justify-center w-full max-w-[700px]">
    <div class="flex flex-col items-center gap-2 w-full">
      <label class="text-sm text-stone-400">Upload Destination</label>
      <p-selectbutton
        [options]="stateOptions"
        [(ngModel)]="value"
        [allowEmpty]="false"
        optionLabel="label"
        optionValue="value">
      </p-selectbutton>
    </div>
    @if (value === 'library') {
      <p-select
        [options]="libraries"
        optionLabel="name"
        placeholder="Select Library"
        [(ngModel)]="selectedLibrary"
        class="w-full"></p-select>
      <p-select
        [options]="selectedLibrary?.paths"
        optionLabel="path"
        placeholder="Select Subpath"
        [(ngModel)]="selectedPath"
        [disabled]="!selectedLibrary"
        class="w-full"></p-select>
    }
    <p-fileupload class="w-full" name="file"
                  [maxFileSize]="maxFileSizeBytes"
                  [customUpload]="true"
                  [multiple]="true" accept=".pdf,.epub,.cbz,.cbr,.cb7"
                  (onSelect)="onFilesSelect($event)"
                  (uploadHandler)="uploadFiles($event)"
                  [disabled]="value === 'library' ? (!selectedLibrary || !selectedPath) : false">
      <ng-template #header let-files let-chooseCallback="chooseCallback" let-clearCallback="clearCallback" let-uploadCallback="uploadCallback">
        <div class="flex flex-col items-center justify-center flex-1 gap-4">
          <div class="flex gap-4">
            <p-button
              (onClick)="choose($event, chooseCallback)"
              icon="pi pi-images"
              [rounded]="true"
              [outlined]="true"
              [disabled]="isChooseDisabled()"
              pTooltip="Choose files to upload"
              tooltipPosition="top"/>

            <p-button
              (onClick)="uploadEvent(uploadCallback)"
              icon="pi pi-cloud-upload"
              [rounded]="true"
              [outlined]="true"
              severity="success"
              [disabled]="isUploadDisabled()"
              pTooltip="Start uploading selected files"
              tooltipPosition="top"/>

            <p-button
              (onClick)="onClear(clearCallback)"
              icon="pi pi-times"
              [rounded]="true"
              [outlined]="true"
              severity="danger"
              [disabled]="!filesPresent() || isUploading"
              pTooltip="Clear selected files"
              tooltipPosition="top"/>
          </div>
          <div>Click the upload icon to upload the files.</div>
        </div>
      </ng-template>
      <ng-template #content let-files let-removeFileCallback="removeFileCallback">
        <div class="flex flex-col gap-8 px-4">
          @if (files?.length > 0) {
            <div>
              <div class="max-h-96 max-w-[22rem] md:max-w-none overflow-y-auto pr-2">
                <div class="flex flex-wrap">
                  @for (uploadFile of this.files; track uploadFile; let i = $index) {
                    <div class="flex justify-between items-center w-full gap-4">
                      <div class="flex items-center gap-4 overflow-hidden flex-1">
                        <p-badge [value]="uploadFile.status === 'Pending' ? 'Ready to Upload' : uploadFile.status" [severity]="getBadgeSeverity(uploadFile.status)"
                                 class="shrink-0"/>
                        <span class="font-semibold text-ellipsis whitespace-nowrap overflow-hidden flex-1">
                          {{ uploadFile.file.name }}
                        </span>
                        <div class="shrink-0">{{ formatSize(uploadFile.file.size) }}</div>
                      </div>
                      @switch (uploadFile.status) {
                        @case ('Pending') {
                          <p-button
                            icon="pi pi-times"
                            (click)="onRemoveTemplatingFile($event, uploadFile.file, removeFileCallback, i)"
                            severity="danger"
                            [text]="true"/>
                        }
                        @case ('Uploading') {
                          <i
                            class="pi pi-spin pi-spinner p-3"
                            style="color: slateblue"
                            pTooltip="Uploading"
                            tooltipPosition="top">
                          </i>
                        }
                        @case ('Uploaded') {
                          <i
                            class="pi pi-check p-3"
                            style="color: green"
                            pTooltip="Uploaded"
                            tooltipPosition="top">
                          </i>
                        }
                        @case ('Failed') {
                          <i
                            class="pi pi-exclamation-triangle p-3"
                            style="color: darkred"
                            pTooltip="{{ uploadFile.errorMessage || 'Upload failed' }}"
                            tooltipPosition="top">
                          </i>
                        }
                      }
                    </div>
                  }
                </div>
              </div>
            </div>
          }
        </div>
      </ng-template>
      <ng-template #file></ng-template>
      <ng-template #empty>
        <div class="flex items-center justify-center flex-col text-center">
          <i class="pi pi-cloud-upload !border-2 !rounded-full !p-8 !text-4xl"></i>
          <p class="mt-6 mb-2">Drag and drop files here to upload.</p>
          <p class="mt-2 mb-2">
            Only <strong>.pdf</strong>, <strong>.epub</strong>, <strong>.cbz</strong>, <strong>.cbr</strong>, and <strong>.cb7</strong> files are supported (max size: 100 MB per
            file).
          </p>
        </div>
      </ng-template>
    </p-fileupload>
  </div>
}
